<style>

</style>

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">{{controller.meta_title}}</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-5 scrollable"> <section class="panel panel-default" style="margin-bottom: 0"><section class="panel-body slim-scroll" data-height="370px" data-size="10px"><ul id="farearea" class="ztree"></ul></section></section></div>
                <div class="col-md-7">
                    <section class="panel panel-default " style="margin-bottom: 0">
                        <header class="panel-heading">
                            <span class="label bg-dark" id="checkCount">15</span> 已选择城市
                        </header>
                        <section class="panel-body slim-scroll" data-height="330px" data-size="10px">
                            <p id="areatxt">

                            </p>
                        </section>
                    </section>



                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:;" class="btn btn-default" data-dismiss="modal">关闭</a>
            <a href="javascript:;" class="btn btn-primary btn-save">保存</a>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<script type="text/javascript">
    $(function(){
        $.ajax({
            url:"/admin/ecom/farearea",
            type:"post",
            success: function(data){
                var setting = {

                    view: {

                        selectedMulti: false
                    },
                    check: {
                        enable: true
                    },
                    data: {

                        simpleData: {
                            enable: true
                        }
                    },
                    callback: {
//                    beforeCheck: beforeCheck,
                        onCheck: onCheck
                    }
                };
//        var data = ;
                var in_array = function(stringToSearch, arrayToSearch) {
                    for (var s = 0; s < arrayToSearch.length; s++) {
                        var thisEntry = arrayToSearch[s].toString();
                        if (thisEntry == stringToSearch) {
                            return true;
                        }
                    }
                    return false;
                }
                {% if id %}
                var select = $("#{{id}}").find("input.selectarea").val();
                if(select.length > 2 && select){
                    select = JSON.parse(select);
                    $.each(data,function(k,v){
                        if(in_array(v.id,select)){
                            v.checked=true
                        }
                        $.each(v.children,function(_k,_v){
                            if(in_array(_v.id,select)){
                                _v.checked=true
                            }
                            $.each(_v.children,function(__k,__v){
                                if(in_array(__v.id,select)){
                                    __v.checked=true
                                }

                            })
                        })
                    })
                };
                {%endif%}
                var zNodes =data;
                var code, log, className = "dark";

//            function onCheck(e, treeId, treeNode) {
//                var zTree = $.fn.zTree.getZTreeObj("farearea"),
//                        checkCount = zTree.getCheckedNodes(true),
//                        nocheckCount = zTree.getCheckedNodes(false).length,
//                        changeCount = zTree.getChangeCheckedNodes().length;
//                 console.log(checkCount.length);
//                var data = arr_to_tree(checkCount,0);
//                 console.log(toarr(data));
//
//
//            }

                function toarr(data){
                    var res = [];
                    $.each(data,function(k,v){
                        $.each(v.children,function(_k,_v){
                            $.each(_v.children,function(__k,__v){
                                res.push(v.id+"_"+_v.id+"_"+__v.id)
                            })
                        })
                    })
                    return res;
                }
                function selectarea(data){
                    var res = [];
                    $.each(data,function(k,v){
                        res.push(v.id)
                        $.each(v.children,function(_k,_v){
                            res.push(_v.id)
                            $.each(_v.children,function(__k,__v){
                                res.push(__v.id)
                            })
                        })
                    })
                    return res;
                }
                function totxt(data){
                    var res = [];
                    $.each(data,function(k,v){
                        res.push('<span class="text-dep1">'+v.name+'</span>');

                        res.push("[")
                        $.each(v.children,function(_k,_v){

                            res.push('<span class="text-dep2">'+_v.name+'</span>')

                            if(_v.children.length < _v.chnum) {
                                res.push("(")
                                $.each(_v.children, function (__k, __v) {
                                    res.push('<span class="text-dep3">'+__v.name+'</span>')
                                })
                                res.push(")")
                            }
                        })
                        res.push("]")

                    })
                    return res;
                }
                function tohtml(data){
                    var res = [];
                    $.each(data,function(k,v){
                        res.push('<span class="text-dep1">'+v.name+'</span>');
                        if(v.children.length < v.chnum){
                            res.push("[")
                            $.each(v.children,function(_k,_v){
                                res.push('<span class="text-dep2">'+_v.name+'</span>')
                                if(_v.children.length < _v.chnum) {
                                    res.push("(")
                                    $.each(_v.children, function (__k, __v) {
                                        res.push('<span class="text-dep3">'+__v.name+'</span>')
                                    })
                                    res.push(")")
                                }
                            })
                            res.push("]")
                        }
                    })
                    return res;
                }
                var arr_to_tree = function(data, pid) {
                    console.log(data);
                    var result = [], temp;
                    var length=data.length;
                    for(var i=0;i<length;i++) {

                        if (data[i].pid == pid) {
                            result.push(data[i]);
                            temp = arr_to_tree(data, data[i].id);
                            if (temp.length > 0) {
                                data[i].children = temp;
                            }
                        }
                    }
                    return result;
                }

                function onCheck(e, treeId, treeNode) {
                    count();

                }

                function count() {
                    var zTree = $.fn.zTree.getZTreeObj("farearea");
                    var checkCount = ""
                    checkCount = zTree.getCheckedNodes(true);
                    var nocheckCount = zTree.getCheckedNodes(false).length;


                    $("#checkCount").text(checkCount.length);
                    $("#nocheckCount").text(nocheckCount);

                    localStorage.setItem('farearea', JSON.stringify(checkCount));
                    var datas = arr_to_tree(JSON.parse(localStorage.getItem("farearea")),0);
                    //console.log(totxt(data).join(" "));
                    var tohtmls =tohtml(datas).join(" ");
                    if(tohtmls.length>0){
                        $("#{{id}}").find(".tohtml").html(tohtmls);
                    }else {
                        $("#{{id}}").find(".tohtml").html('<span class="text-muted">还没有选择地区，请点击【编辑】进行添加！</span>');
                    }

                    $("#{{id}}").find("input.area").val(JSON.stringify(toarr(datas)));
                    $("#{{id}}").find("input.selectarea").val(JSON.stringify(selectarea(datas)));
                    $("#areatxt").html(totxt(datas).join(" "));
                    localStorage.removeItem("farearea");
                }
                function createTree() {
                    $.fn.zTree.init($("#farearea"), setting, zNodes);
                    count();
                }

                $(document).ready(function(){
                    createTree();

                });
                $('.slim-scroll').each(function(){
                    var $self = $(this), $data = $self.data(), $slimResize;
                    $self.slimScroll($data);
                    $(window).resize(function(e) {
                        clearTimeout($slimResize);
                        $slimResize = setTimeout(function(){$self.slimScroll($data);}, 500);
                    });
                    $(document).on('updateNav', function(){
                        $self.slimScroll($data);
                    });
                });
            }
        });


        $('.btn-save').click(function(){
            getdata();
            $('#ajaxModal').modal('hide')
        })
    })
</script>
